<template>
  <div class="container">
    <div class="showCont" v-if="showCont && !showTimeOut">
      <div class="bannerCont">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerArr" :key="index">
            <img src="/img/banner2.png" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="orderCont">
        <div class="orderHead">
          <div class="orderHeadName">推荐程序员</div>
          <div class="headSerch">
            <div class="serchItem" @click="userCityShow = true">
              <div>{{ userCity ? userCity : "全国" }}</div>
              <div class="iconfont icon-paixu2"></div>
            </div>
            <div class="serchItem" @click="showSerchPoint = true">
              <div class="serchVal">
                筛选<span v-if="serchNum > 0">·{{ serchNum }}</span>
              </div>
              <div class="iconfont icon-xiala"></div>
            </div>
          </div>
        </div>
        <div class="orderMain">
          <div
            @click="detaiFn(item)"
            :class="index == 0 ? 'orderItem noTop' : 'orderItem'"
            :key="index"
            v-for="(item, index) in userList"
          >
            <div class="itemHead">
              <div class="userImg">
                <img :src="item.head_img" />
              </div>
              <div class="userNameCont">
                <div class="headName">
                  <div class="orderNum">{{ item.career_path }}</div>
                  <div class="orderTag">{{ item.work_experience }}</div>
                </div>
                <div class="userInfo">
                  {{ item.work_address }} · {{ item.work_status }}
                </div>
              </div>
              <div class="headMoney">¥{{ item.salary_day }}/天</div>
            </div>
            <div class="orderForm">
              <div class="formItem">
                时间：<span :key="b" v-for="(a, b) in item.work_time">
                  <span v-if="b > 0">，</span>
                  {{
                    a.name + "(" + a.start_time + "~" + a.end_time + ")"
                  }}</span
                >
              </div>
              <div class="formItem">
                技能：<span :key="b" v-for="(a, b) in item.skill">
                  <span v-if="b > 0">、</span>
                  {{ a.name }}</span
                >
              </div>
              <div class="formItem">
                作品：<span :key="b" v-for="(a, b) in item.works_case">
                  <span v-if="b > 0">，</span>
                  {{ a.works_name }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <noData v-if="userList.length == 0"></noData>
      </div>
    </div>
    <van-popup v-model:show="userCityShow" round position="bottom">
      <div class="maskCont">
        <div class="maskHead flexCont">
          <div class="headWidth"></div>
          <div>请选择招聘岗位城市</div>
          <div class="resetBtn headWidth" @click="resetFn(1)">重置</div>
        </div>
        <van-area
          :columns-num="2"
          @change="userCityChange"
          confirm-button-text=""
          cancel-button-text=""
          :area-list="areaList"
        />
        <div class="maskBtn" @click="userCitySureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup v-model:show="showSerchPoint" round position="bottom">
      <div class="maskCont">
        <div class="maskHead flexCont">
          <div class="headWidth"></div>
          <div>筛选条件</div>
          <div class="resetBtn headWidth" @click="resetFn(2)">重置</div>
        </div>
        <div class="maskForm">
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="inputNameText">职业方向</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="career_pathShow = true"></div>
              <input
                v-model="formInfo.career_path"
                placeholder="选择职业方向筛选"
              />
            </div>
            <div
              @click="career_pathShow = true"
              class="iconfont icon-xiala"
            ></div>
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="inputNameText">工作状态</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="work_statusShow = true"></div>
              <input
                v-model="formInfo.work_status"
                placeholder="选择工作状态"
              />
            </div>
            <div
              @click="work_statusShow = true"
              class="iconfont icon-xiala"
            ></div>
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="inputNameText">工作经验</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="work_experienceShow = true"></div>
              <input
                v-model="formInfo.work_experience"
                placeholder="选择工作经验"
              />
            </div>
            <div
              @click="work_experienceShow = true"
              class="iconfont icon-xiala"
            ></div>
          </div>
          <div class="formInput">
            <div class="inputName">日薪范围</div>
            <div class="inputOut">
              <div class="inputMask" @click="salary_dayShow = true"></div>
              <input v-model="formInfo.salary_day" placeholder="选择日薪范围" />
            </div>
            <div
              @click="salary_dayShow = true"
              class="iconfont icon-xiala"
            ></div>
          </div>
        </div>
        <div class="maskBtn" @click="serchData">确认查询</div>
      </div>
    </van-popup>
    <van-popup v-model:show="career_pathShow" round position="bottom">
      <div class="maskCont">
        <div class="maskHead">请选择职业方向</div>
        <van-picker
          @change="career_pathChange"
          :show-toolbar="false"
          title="标题"
          :columns="workArr"
        />
        <div class="maskFlexBtn">
          <div class="maskBtn maskBtnDef" @click="career_pathClearFn">
            职业不限
          </div>
          <div class="maskBtn" @click="career_pathSureFn">确认选择</div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model:show="work_statusShow" round position="bottom">
      <div class="maskCont">
        <div class="maskHead">选择工作状态</div>
        <div class="maskCheck">
          <div
            @click="work_statusFn(item)"
            :class="
              item.id == work_statusId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in work_statusArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskFlexBtn">
          <div class="maskBtn maskBtnDef" @click="work_statusClearFn">
            状态不限
          </div>
          <div class="maskBtn" @click="work_statusSureFn">确认选择</div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model:show="work_experienceShow" round position="bottom">
      <div class="maskCont">
        <div class="maskHead">选择工作经验</div>
        <div class="maskCheck">
          <div
            @click="work_experienceFn(item)"
            style="width: 48%"
            :class="
              item.value == work_experienceId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in work_experienceArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskFlexBtn">
          <div class="maskBtn maskBtnDef" @click="work_experienceClearFn">
            经验不限
          </div>
          <div class="maskBtn" @click="work_experienceSureFn">确认选择</div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model:show="salary_dayShow" round position="bottom">
      <div class="maskCont">
        <div class="maskHead">
          选择需要筛选的<span style="color: #86a9fb">日薪范围</span>(元)
        </div>
        <div class="sildNum">
          <span>{{ salary_dayValue[0] }}～{{ salary_dayValue[1] }}元</span>
        </div>
        <div class="maskSild">
          <van-slider
            @change="salary_dayChange"
            active-color="#86a9fb"
            range
            v-model="salary_dayValue"
            :min="0"
            :max="2000"
            :step="100"
          />
        </div>
        <div class="maskFlexBtn">
          <div class="maskBtn maskBtnDef" @click="salary_dayClearFn">
            日薪不限
          </div>
          <div class="maskBtn" @click="salary_daySureFn">确认选择</div>
        </div>
      </div>
    </van-popup>
    <footcpm></footcpm>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import footcpm from "@/components/footcpm.vue";
import { enterprise } from "@/http/api";
import { showToast } from "vant";
import { areaList } from "@vant/area-data";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import noData from "@/components/public/noData.vue";

export default {
  components: { footcpm, load, getTimeOut, noData },
  data() {
    return {
      showCont: false,
      showTimeOut: false,
      showSerchPoint: false,
      serchNum: 0,
      userCityShow: false,
      areaList: areaList,
      career_pathShow: false,
      work_statusShow: false,
      work_experienceShow: false,
      work_statusArr: [
        { name: "正常工作", id: 1 },
        { name: "自由工作", id: 2 },
        { name: "求职中", id: 3 },
      ], //工作状态数组
      work_experienceArr: [
        { name: "1～3年经验", id: 1, value: "1-3" },
        { name: "3～5年经验", id: 2, value: "3-5" },
        { name: "5～10年经验", id: 3, value: "5-10" },
        { name: "10年及以上经验", id: 4, value: "10-100" },
      ], //工作状态数组
      work_statusId: "",
      work_experienceId: "",
      // 日薪范围
      salary_dayShow: false,
      salary_dayValue: [500, 1000],

      formInfo: {
        career_path: "",
        work_status: "",
        work_experience: "",
        salary_day: "",
      },
      bannerArr: [{}, {}],
      userList: [],
      workArr: [],
      page: 1,
      per_page: 10,
      last_page: 0,
      getting: false,
      userCity: "",
    };
  },
  props: {},
  setup() {},
  methods: {
    serchData() {
      this.page = 1;
      this.userList = [];
      this.getData();
      this.showSerchPoint = false;
      this.userCityShow = false;
    },
    career_pathClearFn() {
      this.formInfo.career_path = "职业不限";
      this.career_pathShow = false;
    },
    work_statusClearFn() {
      this.formInfo.work_status = "状态不限";
      this.work_statusShow = false;
    },
    work_experienceClearFn() {
      this.work_experienceId = "";
      this.formInfo.work_experience = "经验不限";
      this.work_experienceShow = false;
    },
    salary_dayClearFn() {
      this.formInfo.salary_day = "日薪不限";
      this.salary_dayShow = false;
    },
    // 设置日薪范围
    salary_daySureFn() {
      if (
        this.formInfo.salary_day == "日薪不限" ||
        this.formInfo.salary_day == ""
      ) {
        this.formInfo.salary_day =
          this.salary_dayValue[0] + "-" + this.salary_dayValue[1] + "元";
      }
      this.salary_dayShow = false;
    },
    salary_dayChange() {
      this.formInfo.salary_day =
        this.salary_dayValue[0] + "-" + this.salary_dayValue[1] + "元";
    },
    // 工作经验
    work_experienceFn(item) {
      this.formInfo.work_experience = item.name;
      this.work_experienceId = item.value;
    },
    work_experienceSureFn() {
      if (this.formInfo.work_experience == "") {
        this.formInfo.work_experience = "正常工作";
      }
      this.work_experienceShow = false;
    },
    // 工作状态
    work_statusFn(item) {
      this.formInfo.work_status = item.name;
      this.work_statusId = item.id;
    },
    work_statusSureFn() {
      if (this.formInfo.work_status == "") {
        this.formInfo.work_status = "正常工作";
      }
      this.work_statusShow = false;
    },
    // 工作职位
    career_pathChange(
      selectedValues,
      selectedOptions,
      selectedIndexes,
      columnIndex
    ) {
      this.formInfo.career_path = selectedValues.selectedValues.join("-");
    },
    career_pathSureFn() {
      if (
        this.formInfo.career_path == "" ||
        this.formInfo.career_path == "职业不限"
      ) {
        this.formInfo.career_path =
          this.workArr[0].text + "-" + this.workArr[0].children[0].text;
      }
      this.career_pathShow = false;
    },
    detaiFn(item) {
      this.$router.push({
        path: "/detail",
        query: { id: item.user_id, type: 1 },
      });
    },
    //选择城市
    userCityChange(selectedValues, selectedOptions) {
      if (selectedValues.selectedOptions.length > 0) {
        this.userCity = selectedValues.selectedOptions[1].text;
      }
    },
    userCitySureFn() {
      if (this.userCity == "") {
        this.userCity = "北京市";
      }
      this.userCityShow = false;
      this.serchData();
    },
    resetFn(type) {
      if (type == 1) {
        this.userCity = "";
      } else {
        this.formInfo = {
          career_path: "",
          work_status: "",
          work_experience: "",
          salary_day: "",
        };
        this.work_experienceId = "";
      }
      this.serchData();
      this.userCityShow = false;
    },
    getSerchNum() {
      let num = 0;
      for (let i in this.formInfo) {
        console.log(i);
        if (this.formInfo[i] && this.formInfo[i].indexOf("不限") == -1) {
          num++;
        }
      }
      this.serchNum = num;
    },
    getData() {
      this.getSerchNum(); //计算筛选数量
      let data = {
        page: this.page,
        per_page: this.per_page,
        city: this.userCity,
        career_path:
          this.formInfo.career_path.indexOf("不限") > -1
            ? ""
            : this.formInfo.career_path,
        work_status:
          this.formInfo.work_status.indexOf("不限") > -1
            ? ""
            : this.formInfo.work_status,
        work_experience: this.work_experienceId,
        salary_day:
          this.formInfo.salary_day.indexOf("不限") > -1
            ? ""
            : this.formInfo.salary_day.split("元")[0],
      };
      enterprise(data)
        .then((res) => {
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            for (let i = 0; i < arr.length; i++) {
              this.userList.push(arr[i]);
            }
            setTimeout(() => {
              this.getting = false;
            }, 100);
            this.last_page = res.data.data.last_page;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    nextfn() {
      if (this.$route.path == "/home") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getData();
            }
          }
        }
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.nextfn);
  },
  created() {
    this.getData();
    this.workArr = this.$converData.getWorkFn();
  },
};
</script>

<style scoped lang="less">
.container {
  background-color: #f1f4fb;
  min-height: 100vh;
  .showCont {
    padding-bottom: 3.75rem;
    box-sizing: border-box;
  }
  .bannerCont {
    width: 100%;
    font-size: 0;
    margin: 0 auto;
    img {
      width: 100%;
      // border-radius: 0.25rem;
    }
  }
  .orderCont {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    width: 92%;
    margin: 0.75rem auto 0;
    .orderHead {
      width: 100%;
      padding-top: 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .orderHeadName {
        font-weight: bold;
        font-size: 0.9rem;
      }
      .headSerch {
        display: flex;
        align-items: center;
        .serchItem {
          display: flex;
          align-items: center;
          padding: 0.15rem 0.5rem;
          border-radius: 0.1rem;
          background-color: #f1f4fb;
          color: #86a9fb;
          font-size: 0.6rem;
          margin-left: 0.5rem;
        }
      }
    }
    .orderMain {
      width: 100%;
      margin-top: 0.25rem;
      .orderItem {
        padding: 1rem 0;
        border-top: 1px dashed #ccc;
        .itemHead {
          // padding: 0rem 0 0.75rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .userImg {
            width: 2.3rem;
            height: 2.3rem;
            overflow: hidden;
            font-size: 0;
            border-radius: 50%;
            img {
              width: 100%;
            }
          }
          .userNameCont {
            flex: 1;
            width: 1rem;
            margin: 0 0.5rem;
            .headName {
              display: flex;
              align-items: center;
              .orderNum {
                font-weight: bold;
                font-size: 0.7rem;
              }
              .orderTag {
                padding: 0.1rem 0.5rem;
                box-sizing: border-box;
                background-color: #86a9fb;
                color: #fff;
                border-radius: 0.1rem;
                font-size: 0.6rem;
                margin-left: 0.25rem;
                transform: scale(0.9);
              }
            }
            .userInfo {
              font-size: 0.6rem;
              color: #999;
              margin-top: 0.15rem;
            }
          }
          .headMoney {
            font-size: 0.6rem;
            color: #86a9fb;
            font-size: 0.8rem;
          }
        }
        .orderForm {
          margin-top: 0.5rem;
          .formItem {
            font-size: 0.6rem;
            margin-bottom: 0.25rem;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
      .noTop {
        border-top: none;
      }
    }
  }
  .maskCont {
    width: 100%;
    padding: 1.25rem 4%;
    box-sizing: border-box;
    text-align: center;

    .userName,
    .maskHead {
      font-size: 0.9rem;
      font-weight: bold;
      text-align: center;
      margin: 0.5rem 0 1rem;
    }
    .flexCont {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .resetBtn {
        font-size: 0.65rem;
        font-weight: normal;
        color: #86a9fb;
        text-align: right;
      }
      .headWidth {
        width: 2.2rem;
      }
    }
    .sildNum {
      margin: 0.25rem auto 2rem;
      font-size: 1.2rem;
      text-align: center;
      span {
        color: #86a9fb;
      }
    }
    .maskSild {
      width: 90%;
      margin: 0 auto;
      margin-bottom: 1rem;
    }
    .maskFlexBtn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .maskBtn {
        width: 46%;
        font-size: 0.65rem;
        padding: 0.6rem 0;
      }
      .maskBtnDef {
        background: #fff;
        color: #86a9fb;
        border: 1px solid #86a9fb;
        box-sizing: border-box;
      }
    }
    .maskForm {
      margin-top: 1rem;
      .formInput {
        display: flex;
        padding: 0.75rem 1rem;
        box-sizing: border-box;
        align-items: center;
        width: 100%;
        background-color: #f1f5ff;
        margin-bottom: 1rem;
        border-radius: 1.5rem;
        .inputName {
          width: 4rem;
          position: relative;
        }
        .icon-xiala {
          width: 1.5rem;
          font-size: 0.8rem;
          color: #ccc;
          text-align: center;
        }
        .inputOut {
          flex: 1;
          width: 3rem;
          position: relative;
          .inputMask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          input {
            width: 90%;
            border: none;
            background: none;
            outline: none;
          }
        }
        .inputText {
          flex: 1;
          width: 3rem;
          border: none;
          background: none;
          outline: none;
        }
      }
    }
    .maskCheck {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .maskCheckItem {
        width: 30%;
        text-align: center;
        background-color: #f1f5ff;
        padding: 0.55rem 0;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
        border: 1px solid #86a9fb;
        box-sizing: border-box;
        color: #86a9fb;
      }
      .maskCheckItemActive {
        background-color: #86a9fb;
        color: #fff;
      }
    }
    .maskBtn {
      width: 100%;
      background-color: #86a9fb;
      color: #fff;
      text-align: center;
      padding: 0.75rem 0;
      margin-top: 1.25rem;
      border-radius: 1.5rem;
    }
  }
}
</style>

<style>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.van-swipe-item {
  font-size: 0.6rem !important;
}
</style>
